<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <title>省市级示例</title>
    <script type="text/javascript" src="${ctx}/static/echart/china.js"></script>
</head>
<body>
<div id="main" style=" height:100% ; width:100%; position:absolute;z-index: -1"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var colum = '${colum}';
    var max = '${max}';
    var option = {
        backgroundColor: '#2F4F4F',
        title: {},
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            y: 'bottom',
            x: 'right',
            data: [],
            textStyle: {
                color: '#fff'
            }
        },
        geo: {
            map: 'china',
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#2F4F4F',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            zoom: 1.1,//定义地图的缩放比例
            silent: true//不响应和不触发鼠标事件
        },
        series: []
    };
    myChart.setOption(option);
    $.get(window.ctx + "/map/points/get-data?colum=" + colum + "&max=" + max, function (mapInfo) {
        var data = mapInfo.points;
        var level = mapInfo.levelList;
        var max = mapInfo.max;
        var min = mapInfo.min;
        /**
         * 设置图例
         */
//        var legend = [
//            {min: level[0], color: '#FAFAFA'},
//            {min: level[1], max: level[0], color: '#FF6347'},
//            {max: level[1], color: '#40FFFF'}
//        ];
        var legend = [
            {min:0, color: '#FF6347',label: '>0%'},
            {min:-20, max:0, color: '#FFFF00',label: '-20%~0%'},
            {max:-20, color: '#00FF00',label: '<-20%'}
        ];
        myChart.setOption({
            title: {
                text: mapInfo.title,
                subtext: 'data from jd.com',
                sublink: 'http://www.jd.com',
                left: 'center',
                textStyle: {
                    color: '#FFFFFF',
                    fontSize: 24
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params, ticket, callback) {
                    return params.seriesName + "<br>" + params.data.name + ":" + params.data.value[2];
                }
            },
            visualMap: {
                type: 'piecewise',
                calculable: false,
                pieces: legend,
                textStyle: {
                    color: '#FFFFFF',
                    fontSize: 18
                },
                zlevel: 100,
                itemWidth: 100,
                itemHeight: 40
            },
            series: [
                {
                    name: '购买用户占比',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: data,
                    symbolSize:10,
//                        function (val) {
//                        var data = val[2];
////                        if (data > level[0]) {
////                            return 8;
////                        } else if (data > level[1]) {
////                            return 4;
////                        } else {
////                            return 1;
////                        }
//                        if (data > 50000) {
//                            return 8;
//                        } else if (data > 20000) {
//                            return 5;
//                        } else {
//                            return 3;
//                        }
//                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            formatter: '{b}',
                            show: true
                        }
                    },
//                    blendMode: 'lighter',
//                    itemStyle: {
//                        normal: {
//                            color: function (val) {
//                                var data =val.value;
//
//                                if ((data[2] % 3) == 1) {
//                                    return 'rgb(255,255,0,0.9)';
//                                } else if (data[2] % 3 == 2) {
//                                    return 'rgb(255,255,0,0.5)';
//                                } else if (data[2] % 3 == 0) {
//                                    return 'rgb(255,255,0,0.1)';
//                                }
//                            }
//                        }
//                    },
                    zlevel: 1
                }
            ]
        });

    });

</script>
</body>
</html>
